<template>
  <div class="Cart">
    <van-pull-refresh v-model="refreshing"
                      @refresh="onRefresh"
                      success-text="加载完成"
                      success-duration="500">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getCartList">
        <div class="cartItem" v-for="item in cartList" :key="item.id">
          <van-card
            :num="item.count"
            :price="item.sell_price.toFixed(2)"
            :title="item.title"
            :thumb="item.src"
          />
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  name: 'index',
  data: () => ({
    cartList: [],
    finished: false,
    loading: false,
    refreshing: false
  }),
  methods: {
    getCartList () {
      this.cartList = JSON.parse(localStorage.getItem('cart'))
      this.loading = false
      this.finished = true
    },
    onRefresh () {
      // 初始化参数
      this.finished = false
      this.loading = true
      this.getCartList()
      this.refreshing = false
    }
  }
}
</script>

<style lang="scss" scoped>
  .Cart {
    padding: 20px 20px 60px;
    height: 100%;
    box-sizing: border-box;

    .van-pull-refresh {
      height: 100%;
    }

    .van-list {
      .cartItem {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fafafa;
        margin-top: 20px;
        border: 1px solid #eeeeee;

        .van-card {
          flex: 1;
        }
      }
    }
  }
</style>
